<template>
  <!-- aria-hidden="true" -->
  <svg inert="true" class="svg-icon" :style="{width:width,height:height}" >
      <use :xlink:href="icon" :fill="color"></use>
  </svg>
</template>

<script>
  export default {
      name: 'icon-svg',
      props: {
          name: {
              type: String,
              //required: true
          },
          width:{
            type:String,
            required:false,
            default:'1em'
          },
          height:{
            type:String,
            required:false,
            default:'1em'
          },
          color:{
            type:String,
            required:false
          }
      },
      computed: {
          icon () {
              return `#icon-${this.name}`
          }
      },
      mounted(){
        //console.log(this.$props);
      }
  }
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  /* 通过给svg 图形元素设置fill= currentColor 图形元素的颜色会自动继承父级color的颜色 */
  overflow: hidden;

}
</style>
